Markers and Labels

Chart for WinRT has special support for displaying bound and interactive markers and labels. There is no single approach to creating or displaying markers in a chart, so our strategy is to provide an extensible object model for the C1Chart control to help you create the exact setup you need.

This topic will cover the ChartPanelObject and the ChartView.Layers collection and how you can use these to provide a customized assortment of markers and labels for your chart.

To use chart panel with chart it’s necessary to add the panel to the Layers collection of ChartView:

XAML	Copy Code
<Chart:C1Chart > <Chart:C1Chart.View> <Chart:ChartView> <Chart:ChartView.Layers> <Chart:ChartPanel > <!--ChartPanelObjects--> </Chart:ChartPanel> </Chart:ChartView.Layers> </Chart:ChartView> </Chart:C1Chart.View> </Chart:C1Chart>

XAML

Copy Code

<Chart:C1Chart >
    <Chart:C1Chart.View>
        <Chart:ChartView>
            <Chart:ChartView.Layers>
                <Chart:ChartPanel >
                   <!--ChartPanelObjects-->
                </Chart:ChartPanel>
            </Chart:ChartView.Layers>
        </Chart:ChartView>
    </Chart:C1Chart.View>
</Chart:C1Chart>

Through the ChartView.Layers collection you can add any number of ChartPanels. Each panel can have any number of ChartPanelObjects, which are basically UI elements that define our markers. The ChartPanelObject has a few key properties:

Attach – sets whether the object is attached or “snapped” to the data points. You can attach to X, Y, both or none.
Action – sets the interaction behavior such as on mouse move, mouse drag or none.
DataPoint – explicitly sets the initial data point, or for creating a static marker

You can set the ChartPanelObject.Content property to any UIElement. This allows you to define the look of your marker as well as provide binding to the data point. You can also use the Alignment properties to help define the look of your marker – you may want to create a centered marker. In that case, you'd set the HorizontalAlignment property to "center".

The following XAML defines text label with its left-bottom corner at x=0, y=0 in data coordinates:

XAML	Copy Code
<Chart:ChartPanelObject DataPoint="0,0" VerticalAlignment="Bottom"> <TextBlock Text="Zero"/> </Chart:ChartPanelObject>

It is not necessary to specify both coordinates. If the coordinate is set to double.NaN then the element does not have specific x- or y- coordinates.

We can create horizontal marker at y=0. Note that the HorizontalAlignment property is set to Stretch and the element fills the width of the plot area.

XAML	Copy Code
<!-- horizontal line --> <c1chart:ChartPanelObject DataPoint="NaN,0" HorizontalAlignment="Stretch"> <Border BorderBrush="Red" BorderThickness="0,2,0,0" Margin="0,-1,0,0" /> </c1chart:ChartPanelObject>

The following sample here creates a vertical marker:

XAML	Copy Code
<!-- vertical line --> <c1chart:ChartPanelObject DataPoint="0,NaN" VerticalAlignment="Stretch"> <Border BorderBrush="Red" BorderThickness="2,0,0,0" Margin="-1,0,0,0" /> </c1chart:ChartPanelObject>

The chart panel objects support only the main axes. For auxiliary axes you need to perform coordinate conversion.